
Step : 1
- Open Visual studio.
- Click on “File”>New>Project>Visual c#>Web> then provide your project name> then select “ok”> then click “MVC”>ok.
- Create new folder and copy your downloaded fromValidation plugin file and paste it in this folder like as vedio.
Step : 2 link needed fromValidation css and js file like as vedio.
<link href="~/Plug/bootstrapvalidator-master/dist/css/bootstrapValidator.css" rel="stylesheet" />
<script src="~/Plug/bootstrapvalidator-master/dist/js/bootstrapValidator.js"></script>
Step : 3 Create view like as vedio.
Index.cstml
<br />
<div class="container">
@using (Html.BeginForm("Index", "Home", new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post, new { id = "addUser" }))
{
<div class="form-group">
<label class="col-md-3">Username:</label>
<input class="form-control User" name="Username" placeholder="Enter Name" />
</div>
<div class="form-group">
<label class="col-md-3">Password:</label>
<input class="form-control pwd" name="Password" placeholder="Enter Password" />
</div>
<div class="button">
<button>Submit</button>
</div>
<div>
@Html.ValidationSummary(true)
</div>
}
</div>
Step:4 Now write jquery method for from Validation [show display error message] like as vedio
<script type="text/javascript">
$(document).ready(function () {
$('#addUser').bootstrapValidator({
fields: {
Username: {
selector: '.User',
message: 'name not valid',
validators: {
notEmpty: {
message:'Name can not empty'
},
stringLength: {
min: 6,
max: 12,
message:'Name will be 6 to 12 digite'
}
}
},
Password: {
selector: '.pwd',
message: 'Password not valid',
validators: {
notEmpty: {
message: 'Password can not empty'
},
stringLength: {
min: 6,
max: 12,
message: 'Password will be 6 to 12 digite'
}
}
}
}
})
})
</script>
Now run the project